<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one,.two{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .one>div,.two>div{
            width: 98px;
            height: 98px;
            line-height: 98px;
            text-align: center;
            border-radius: 50%;
            background-color: red;
            float: left;
        }

        .two{
            position: absolute;
            left: 500px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div class="one">
        <div draggable="true">1</div>
        <div draggable="true">2</div>
        <div draggable="true">3</div>
        <div draggable="true">4</div>
        <div draggable="true">5</div>
        <div draggable="true">6</div>
        <div draggable="true">7</div>
        <div draggable="true">8</div>
    </div>

    <div class="two"></div>

    <script>
        var divArr = document.querySelectorAll(".one div");
        var temp = null;
        for(var i=0;i<divArr.length;i++){
            divArr[i].ondragstart = function () {
                temp = this;
                console.log(temp);
            };

            divArr[i].ondragend = function () {
                temp = null;
                console.log(temp);
            };
        }

        //目标元素的行为
        var two = document.querySelector(".two");
        two.ondragover = function (e) {
            //阻止拖拽的默认事件
            e.preventDefault();
        };
        two.ondrop = function () {
            this.appendChild(temp);
        };
    </script>
</body>
</html>